<style type="text/css">
.title{
	width: 100%;
	background:#F0F7FF;
	color: rgba(44,57,73,1);
	font-size: 20px;
    font-weight: bold;
	height:50px;
	padding:12px;
}
.kuang{
		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
	border-radius: 16px;
	width:90%; margin:0 auto;
	min-height:600px;
	margin-bottom: 50px;
}
.bgcss{
	position:absolute;
	width:100%;
	height:40px;
	background:#F0F7FF;
	top:0px;
	
}
.ui-button-secondary{
	color: #fff!important;
    background-color: #E54C2A!important;
}
.container {
    max-width: 100%!important;
}
.money{
	font-size: 44px;
    font-family: Roboto;
    font-weight: 500;
    line-height: 58px;
    color: rgba(229,76,42,1);
}
.badge-secondary {
    color: #fff;
	background-color: #4280C2!important;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 5px;
}
.info-table > tbody > tr {
    border-top: 0px!important;
}
.lie {
    margin: 10px 0;
    font-size: 20px;
    font-family: Times;
    font-weight: bold;
    line-height: 30px;
    color: rgba(44,57,73,1);
}
.lietd {
    float: right;
    text-align: right;
    font-size: 20px;
    font-family: Arial;
    font-weight: 400;
    line-height: 30px;
    color: rgba(85,103,115,1);
}
.f_wei {
    position: absolute;
    width: 90%;
    text-align: center;
    background: #FFCBCB;
    font-size: 20px;
    font-family: Times;
    font-weight: bold;
    line-height: 40px;
    height: 40px;
    color: #FF0000;
    bottom: 50px;
	display:none;
   /* margin-left: -25px;*/
}
.f_tou {
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background: #F0F7FF;
    font-size: 20px;
    font-family: Times;
    font-weight: bold;
    color: rgba(44,57,73,1);
}
.f_tou img {
    width: 21px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 5px;
}
</style>

<div class="　bg_bai my_po kuang"  style="top:-15%;left:5%;width: 90%; background:#FFF; padding:25px;">

       <div class="ui-g">
     <!-- <button pButton type="button" label="{{'< Back'|translate}}"  (click)="back()" class="ui-button-secondary"></button>-->
       <img src="/assets/images/back.png" (click)="back()" alt="" style="width:108px; height:44px;">
       </div>
        <div class="ui-g-6" style="text-align:center;">
            <carousel>
                <slide *ngFor="let image of getPictures()">
                    <img [src]="image.filePath" alt="" style="display: block;  width:97%; height:97%; margin-top:15px;border-radius: 25px;"  (click)="openLargeImage(image)">
                </slide>
            </carousel>
        </div>
        <div class="ui-g-6">
            <div class="ui-g-12">
                <h3><strong>{{getParentProject()['name']}}</strong></h3>
                <small style="color: #AAB3B9;">{{getParentProject()['buildingAddress']}}, {{getParentProject()['city']}}, {{getParentProject()['country']}}</small>
            </div>
            <div class="ui-g-12">
                <span class="bold">{{'LOT#'|translate}} : {{property.lot}}</span>
            </div>
            <div class="ui-g-12" style="padding:0px;">
                <span class="money">{{property.price | currency}}</span>
            </div>
            <div class="ui-g-12" style="padding:0px;">
                <i class="fa fa-bed" style="padding: 10px 10px;" aria-hidden="true"></i>
                <span class="badge badge-secondary">{{property.bedroomCount || 0}}</span>
                <i class="fa fa-bath" style="padding: 10px 10px" aria-hidden="true"></i>
                <span class="badge badge-secondary">{{property.bathRoomCount || 0}}</span>
                <i class="fa fa-car" style="padding: 10px 10px" aria-hidden="true"></i>
                <span class="badge badge-secondary">{{property.parkingCount || 0}}</span>
                <i class="fa fa-book" style="padding: 10px 10px" aria-hidden="true"></i>
                <span class="badge badge-secondary">{{property.studyCount || 0}}</span>
                <i class="fa fa-archive" style="padding: 10px 10px" aria-hidden="true"></i>
                <span class="badge badge-secondary">{{property.storageCount || 0}}</span>
            </div>
            <div class="ui-g-12" style="border-top:1px solid #D7D7D7; margin-top:40px; padding-top:40px;">
                <table class="info-table">
                    <tr >
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="lie">{{'Internal Size'|translate}}</td>
                        <td class="lietd">{{property.internalSize}} (&nbsp;&nbsp;m<sup>2</sup>&nbsp;&nbsp;)</td>
                    </tr>
                    <tr>
                        <td class="lie">{{'External Size'|translate}}</td>
                        <td class="lietd">{{property.externalSize}} (&nbsp;&nbsp;m<sup>2</sup>&nbsp;&nbsp;)</td>
                    </tr>
                    <tr>
                        <td class="lie">{{'Aspect'|translate}}</td>
                        <td class="lietd">{{property.aspect}} </td>
                    </tr>
                  
                    <tr>
                        <td class="lie">{{'Sale Status'|translate}}</td>
                        <td class="lietd">{{property.sale_status}}</td>
                    </tr>
                    <tr>
                        <td class="lie">{{'Sale Note'|translate}}</td>
                        <td class="lietd">{{property.notes || property.sale_note}}</td>
                    </tr>

                </table>
            </div>
        </div>
        
    </div>

    <div class="ui-g kuang" style="margin-top: 498px;width: 92%;min-height: 430px;">
          <div class="f_wei" >This property was sold by other agent!</div>
        <div class="ui-g-12 f_tou"><img src="/assets/images/shu_4.png" alt="">&nbsp;&nbsp;File download</div>
        
        <div class="f_fl_da col-xs-6 col-sm-3 col-md-3">
                <dl class="f_dl">
                    <dt><img src="/assets/images/f_6.png" alt="" width="100%"></dt>
                    <dd>{{'Contract of Sale'|translate}}</dd>
                    <dd class="ti" *ngFor="let attachment of property['property_cos_document']"><a [href]="attachment.filePath" target="_blank" download>&nbsp;download</a></dd>
                     <dd class="ti" *ngIf="property['property_cos_document']==null">&nbsp;download</dd>
                </dl>
        </div>
        
        <div class="f_fl_da col-xs-6 col-sm-3 col-md-3">
                <dl class="f_dl">
                    <dt><img src="/assets/images/f_7.png" alt="" width="100%"></dt>
                    <dd>{{'Deposit Form'|translate}}</dd>
                    <dd class="ti" *ngFor="let attachment of property['property_deposit_form_document']">
                <a [href]="attachment.filePath" target="_blank" download>&nbsp;download</a></dd>
                    <dd class="ti" *ngIf="property['property_deposit_form_document']==null">
                &nbsp;download</dd>
                
                </dl>
        </div>
        <div class="f_fl_da col-xs-6 col-sm-3 col-md-3" style="display:none">
                <dl class="f_dl">
                    <dt><img src="/assets/images/f_6.png" alt="" width="100%"></dt>
                    <dd>{{'Solicitor Contact'|translate}}</dd>
                    <dd class="ti">download</dd>
                </dl>
        </div>
        <div class="f_fl_da col-xs-6 col-sm-3 col-md-3">
                <dl class="f_dl">
                    <dt><img src="/assets/images/f_8.png" alt="" width="100%"></dt>
                    <dd>{{"Bill & Charges"|translate}}</dd>
                    <dd class="ti" *ngFor="let attachment of property['property_bill_charges']">
                <a [href]="attachment.filePath" target="_blank" download>&nbsp;download</a></dd>
                    <dd class="ti" *ngIf="property['property_bill_charges']==null">
                &nbsp;download</dd>
                </dl>
        </div>
        <div class="f_fl_da col-xs-6 col-sm-3 col-md-3">
                <dl class="f_dl">
                    <dt><img src="/assets/images/f_9.png" alt="" width="100%"></dt>
                    <dd>{{'Management Agreement'|translate}}</dd>
                    <dd class="ti" *ngFor="let attachment of property['property_management_agreement_document']">
                <a [href]="attachment.filePath" target="_blank" download>&nbsp;download</a></dd>
                    <dd class="ti" *ngIf="property['property_management_agreement_document']==null">
                &nbsp;download</dd>
                </dl>
        </div>
        
      
        
            
      <div style="display:none">
        <div class="ui-g-6">
            <h5>{{'Contract of Sale'|translate}}</h5>
            <div [innerHTML]="property.textContractOfSale"></div>
        </div>
        <div class="ui-g-6 bold">
            <i class="fa fa-paperclip" aria-hidden="true"></i> {{'Attachment'|translate}}:
            <div *ngFor="let attachment of property['property_cos_document']">
                <a [href]="attachment.filePath" target="_blank" download>|&nbsp;{{attachment.originalFilename}}</a>
                <br>
            </div>
        </div>
        <div class="ui-g-6">
            <h5>{{'Deposit Form'|translate}}</h5>
            <div [innerHTML]="property.textDepositForm"></div>
        </div>
        <div class="ui-g-6 bold">
            <i class="fa fa-paperclip" aria-hidden="true"></i> {{'Attachment'|translate}}:
            <div *ngFor="let attachment of property['property_deposit_form_document']">
                <a [href]="attachment.filePath" target="_blank" download>|&nbsp;{{attachment.originalFilename}}</a>
                <br>
            </div>
        </div>

        <div class="ui-g-6">
            <h5>{{'Solicitor Contact'|translate}}</h5>
            <div [innerHTML]="property.textSolicitor"></div>
        </div>
        <div class="ui-g-6 bold">
        </div>

        <div class="ui-g-6">
            <h5>{{"Bill & Charges"|translate}}</h5>
            <div [innerHTML]="property.textBillsCharges"></div>
        </div>
        <div class="ui-g-6 bold">
            <i class="fa fa-paperclip" aria-hidden="true"></i> {{'Attachment'|translate}}:
            <div *ngFor="let attachment of property['property_bill_charges']">
                <a [href]="attachment.filePath" target="_blank" download>|&nbsp;{{attachment.originalFilename}}</a>
                <br>
            </div>
        </div>

        <div class="ui-g-6">
            <h5>{{'Management Agreement'|translate}}</h5>
            <div [innerHTML]="property.textManagementAgreement"></div>
        </div>
        <div class="ui-g-6 bold">
            <i class="fa fa-paperclip" aria-hidden="true"></i> {{'Attachment'|translate}}:
            <div *ngFor="let attachment of property['property_management_agreement_document']">
                <a [href]="attachment.filePath" target="_blank" download>|&nbsp;{{attachment.originalFilename}}</a>
                <br>
            </div>
        </div>
       </div>
    </div>

    <div class="ui-g " style="text-align:center;width: 94%; margin-left: 3%;background: #FFCBCB;color: #FF0000;">

        <div class="ui-g-12" *ngIf="isPropertyAvailableForUser(property) && !isSaleNotesEmpty()">
            <div class="font-weight-bold">
                <i class="fa fa-comment" aria-hidden="true"></i>
                {{'Sale Notes'|translate}}</div>
            <p>{{property.sale_note}}</p>
        </div>
        <div class="ui-g-12" *ngIf="propertyLoaded">
            <ng-container *ngIf="isPropertyAvailableForUser(property); else elseTemplateNotifySale">
                <div *ngIf="!isBankCardEmpty()">
                    <div class="font-weight-bold">
                        <i class="fa fa-cc-visa" aria-hidden="true"></i>
                        {{'Bank Card'|translate}}</div>
                    <div *ngFor="let attachment of property['property_bank_card_picture']">
                        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
                    </div>
                </div>

                <p-button class="ui-g-12" label="{{'NOTIFY Interest'|translate}}" (click)="notifySale()"></p-button>
            </ng-container>
            <ng-template #elseTemplateNotifySale>
                <div class="alert alert-danger" role="alert">
                    {{'This property was sold by other agent'|translate}}
                </div>
            </ng-template>
        </div>
    </div>




<p-dialog header="{{getParentProject()['name']  + ' ' + property.lot}}" [responsive]="true" [closable]="false" [modal]="true" [(visible)]="newDialogDisplay">
    <p-steps styleClass="flex-center" [model]="step" [(activeIndex)]="activeIndex"></p-steps>
    <div [ngSwitch]="activeIndex">
        <div *ngSwitchCase="0">
            {{'Sale Notes'|translate}}:
            <div class="row">
                <div class="col-md-12">
                    <textarea [(ngModel)]="currentNotifyEntity.saleNotificationContent" style="width: 500px" pInputTextarea></textarea>
                </div>
            </div>
            {{'Please upload Reservation Form/EOI and Deposit Slip'|translate}}:
            <div *ngFor="let attachment of currentNotifyEntity['sales_notification_property_bank_card_picture']">
                <p-button (onClick)="deleteFile(attachment,currentNotifyEntity)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
            </div>
            
            <p-fileUpload #fileUploaderPictures (uploadHandler)="fileUpload('sales_notification_property_bank_card_picture',fileUploaderPictures,currentNotifyEntity)"
                customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
        </div>
        <div *ngSwitchCase="1">
            <p-panel header="Buyer's Detail">
                <div class="ui-g">
                    <div class="ui-g-6 ui-g-nopad">
                        <div class="ui-g-12">
                            <div class="ui-g-3 ui-sm-12">First Name</div>
                            <div class="ui-g-6 ui-sm-12">
                                <input type="text" pInputText [(ngModel)]="currentNotifyEntity.customer.firstName" />
                            </div>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-g-3 ui-sm-12">Last Name</div>
                            <div class="ui-g-6 ui-sm-12">
                                <input type="text" pInputText  [(ngModel)]="currentNotifyEntity.customer.lastName" />
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-6">
                        <div class="ui-g-3 ui-sm-12">Street</div>
                        <div class="ui-g-9 ui-sm-12">
                            <textarea class="ui-g-12 address-textarea" [(ngModel)]="currentNotifyEntity.customer.street" ></textarea>
                        </div>
                    </div>
                </div>
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="ui-g-6">
                            <div class="ui-g-3 ui-sm-12">Email</div>
                            <div class="ui-g-3 ui-sm-12">
                                <input type="text" pInputText [(ngModel)]="currentNotifyEntity.customer.privateEmail" />
                            </div>
                        </div>
                        <div class="ui-g-2 ui-sm-12">FIRB</div>
                        <div class="ui-g-3 ui-sm-12">
                            <p-inputSwitch [(ngModel)]="currentNotifyEntity.customer.firb" (onChange)="onSwitchChange($event, 'customer', 'firb')"></p-inputSwitch>
                        </div>
                    </div>
                    <div class="ui-g-12">
                        <div class="ui-g-6">
                            <div class="ui-g-3 ui-sm-12">Phone</div>
                            <div class="ui-g-6 ui-sm-12">
                                <input type="text" pInputText [(ngModel)]="currentNotifyEntity.customer.mobile" />
                            </div>
                        </div>
                        <div class="ui-g-2 ui-sm-12">First Home Buyer</div>
                        <div class="ui-g-3 ui-sm-12">
                            <p-inputSwitch [(ngModel)]="currentNotifyEntity.customer.firstBuyer" (onChange)="onSwitchChange($event, 'customer', 'firstBuyer')"></p-inputSwitch>
                        </div>
                    </div>
                    <p-message style="display: flex;justify-content: center;" severity="info" text="I have asked the named referral and confirm they consent to receiving marketing information and being contracted by iPAN"></p-message>
                </div>
            </p-panel>
        </div>
        <div *ngSwitchCase="2">
            <p-panel header="Solicitor's Detail">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="ui-g-2 ui-sm-12">Company Name</div>
                        <div class="ui-g-9 ui-sm-12">
                            <input type="text" class="ui-g-12" pInputText [(ngModel)]="currentNotifyEntity.solicitor.company"/>
                        </div>
                    </div>
                    <div class="ui-g-6">
                        <div class="ui-g-3 ui-sm-12">Phone</div>
                        <div class="ui-g-6 ui-sm-12">
                            <input type="text" pInputText [(ngModel)]="currentNotifyEntity.solicitor.phone"/>
                        </div>
                    </div>
                </div>
                <div class="ui-g">
                    <div class="ui-g-6 ui-g-nopad">
                        <div class="ui-g-12">
                            <div class="ui-g-3 ui-sm-12">Fax</div>
                            <div class="ui-g-6 ui-sm-12">
                                <input type="text" pInputText [(ngModel)]="currentNotifyEntity.solicitor.fax" />
                            </div>
                        </div>
                        <div class="ui-g-12">
                            <div class="ui-g-3 ui-sm-12">Email</div>
                            <div class="ui-g-6 ui-sm-12">
                                <input type="text" pInputText [(ngModel)]="currentNotifyEntity.solicitor.email" />
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-6">
                        <div class="ui-g-3 ui-sm-12">Postal Address</div>
                        <div class="ui-g-9 ui-sm-12">
                            <textarea class="ui-g-12 address-textarea" [(ngModel)]="currentNotifyEntity.solicitor.address" ></textarea>
                        </div>
                    </div>
                </div>
            </p-panel>
        </div>
    </div>
    <p-footer>
        <button *ngIf="this.activeIndex > 0" pButton type="button" label="{{ 'Prev' |translate}}" (click)="goPrevStep()" ></button>
        <button *ngIf="this.activeIndex < 2" pButton type="button" label="{{ 'Next' |translate}}" (click)="goNextStep()" ></button>
        <button *ngIf="this.activeIndex >= 2" pButton type="button" label="{{'SAVE' |translate}}" (click)="finishSave()" ></button>
        <button pButton type="button" label="{{'Close' |translate}}" (click)="closeNotify()" ></button>
    </p-footer>
</p-dialog>

<p-dialog header="{{getParentProject()['name']  + ' ' + property.lot}}" [responsive]="true" [(visible)]="newBankDisplay">
    <p-message style="display: flex;justify-content: center;" severity="info" text="Please provide your banking details if you want to NOTIFY SALE in iPAN"></p-message>
    <br />
   <p-panel header="Your's Banking Information">
        <div class="ui-g">
            <div class="ui-g-6">
                <div class="ui-g-5 ui-sm-12">Bank Name</div>
                <div class="ui-g-6 ui-sm-12">
                    <input type="text" class="ui-g-12" pInputText [(ngModel)]="user.bankName" />
                </div>
            </div>
            <div class="ui-g-6">
                <div class="ui-g-5 ui-sm-12">Swift Code</div>
                <div class="ui-g-6 ui-sm-12">
                    <input type="text" pInputText [(ngModel)]="user.bankSwiftCode"/>
                </div>
            </div>
        </div>
        <div class="ui-g">
            <div class="ui-g-12 ui-g-nopad">
                <div class="ui-g-6">
                    <div class="ui-g-5 ui-sm-12">Account Name</div>
                    <div class="ui-g-6 ui-sm-12">
                        <input type="text" pInputText [(ngModel)]="user.bankAcctName"/>
                    </div>
                </div>
                <div class="ui-g-6">
                    <div class="ui-g-5 ui-sm-12">BSB</div>
                    <div class="ui-g-6 ui-sm-12">
                        <input type="text" pInputText [(ngModel)]="user.bankBSBNo"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-g">
            <div class="ui-g-12 ui-g-nopad">
                <div class="ui-g-6">
                    <div class="ui-g-5 ui-sm-12">Account</div>
                    <div class="ui-g-6 ui-sm-12">
                        <input type="text" pInputText [(ngModel)]="user.bankAcctNo" />
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-g">
            <div class="ui-g-12 ui-g-nopad">
                <div class="ui-g-12">
                    <div class="ui-g-3 ui-sm-12">Comment</div>
                    <div class="ui-g-6 ui-sm-12">
                        <textarea class="ui-g-12 address-textarea" [(ngModel)]="user.bankComment"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </p-panel>
    <p-footer>
        <button pButton type="button" label="{{'Next' |translate}}" (click)="checkBankInfo()" ></button>
    </p-footer>
</p-dialog>

<p-dialog header="{{'Express Interest'|translate}}" [responsive]="true" [(visible)]="display">
    {{'Sale Notes'|translate}}:
    <div class="row">
        <div class="col-md-12">
            <textarea [(ngModel)]="currentNotifyEntity.saleNotificationContent" style="width: 500px" pInputTextarea></textarea>
        </div>
    </div>


    {{'Attachment'|translate}}:
    <div *ngFor="let attachment of currentNotifyEntity['sales_notification_property_bank_card_picture']">
        <p-button (onClick)="deleteFile(attachment,currentNotifyEntity)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
    </div>
    
    <p-fileUpload #fileUploaderPictures (uploadHandler)="fileUpload('sales_notification_property_bank_card_picture',fileUploaderPictures,currentNotifyEntity)"
        customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
    

    <p-footer>
            <button pButton type="button" label="{{'SAVE'|translate}}" (click)="saveSalesNote()" ></button>
    </p-footer>
</p-dialog>
<p-growl [(value)]="msgs"></p-growl>
<p-dialog header="" [(visible)]="dialogDisplay" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70" 
        [maximizable]="true" [baseZIndex]="10000">
    <span>Application has been submited. Please wait for iPAN response.</span>
        <p-footer>
            <button type="button" pButton icon="pi pi-check" (click)="dialogDisplay=false" label="{{'OK'|translate}}"></button>
        </p-footer>
</p-dialog>
<p-dialog header="" [(visible)]="imgPreview" modal="true">
        <img [src]="previewImgSrc" alt="" style="height: 100%; width: 100%; object-fit: contain" >
</p-dialog>